html,
body {
  display: flex;
  flex-direction: column;
}
.run {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .mask {
    flex: 1;
    overflow-y: scroll;
    background: url(../fitness-imgs/huo-img7.jpg) no-repeat center / cover;
    padding-bottom: 80px;
    .run-kilo {
      height: 103px;
      padding: 0 20px;

      span {
        font-size: 16px;
      }
    }

    .run-map {
      height: 485px;
      width: 100%;
      background: url(../fitness-imgs/huo-map.jpg) no-repeat center;
      background-size: cover;

      .run-icon {
        height: 485px;
        padding: 0 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        flex-wrap: wrap;

        .run-btn {
          width: 100%;
          height: 40px;
          margin-top: 30px;
          display: flex;
          justify-content: space-between;

          button {
            width: 100px;
            height: 40px;
            background-color: #9cbce2;
            border-radius: 20px;
            color: #fff;
          }
        }

        .run-go {
          width: 190px;
          height: 190px;
          border-radius: 50%;
          background-color: rgba(66, 148, 255, 0.7);
          color: #1592cc;
          align-self: center;
          p {
            font-size: 90px;
            font-weight: bold;
            text-align: center;
            line-height: 190px;
          }
        }

        .run-final {
          // align-self: center;
          display: flex;
          justify-content: space-between;

          .icon-set {
            font-size: 37px !important;
            color: #fff;
            font-weight: bold;
          }
          .icon-music {
            font-size: 37px !important;
            color: #fff;
            font-weight: bold;
          }

          a {
            display: block;
            width: 121px;
            height: 40px;
            color: #fff;
            background-color: #4294ff;
            border-radius: 20px;
            text-align: center;
            line-height: 40px;
          }
        }
      }
    }

    .run-rout {
      height: 82px;
      width: 100%;
      padding: 0 20px;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;

      span {
        width: 64px;
        height: 64px;
        text-align: center;
        line-height: 64px;
        position: absolute;
        right: 0px;
        top: 0px;
      }
    }
  }
}
